<template>
  <div class="box">
    <div class="zzc" v-draggable>
      <div class="item1">
        <span>提示</span>
        <span @click="off1">
          <el-icon class="el-icon-close"></el-icon>
        </span>
      </div>
      <div class="item2">
        <span class="iconfent">
          <el-icon class="el-icon-warning"></el-icon>
        </span>
        <span> 确定删除所选数据吗? </span>
      </div>
      <div class="item3">
        <el-button @click="off1">取消</el-button>
        <el-button type="primary" @click="off">确定</el-button> &nbsp;&nbsp;&nbsp;
      </div>
    </div>
  </div>
</template>

<script>
import { deleteModelSpecification } from '@/api/standardsystem/modelSpecification'
import '@/directives/draggable'
export default {
  data() {
    return {
      list: [],
    }
  },
  methods: {
    offids(item) {
      this.list = item
    },

    off() {
      console.log(this.list);
      // ===================批量删除
      deleteTable({ idList: this.list, delFlag: 1 }).then((response) => {
        console.log(response)
        if (response.data.code === 0) {
          this.$message.success(response.data.msg)
          this.$emit('chang')
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    off1() {
      this.$emit('chang1')
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  width: 90vw;
  height: 100vh;
  background-color: red;
  position: absolute;
  z-index: 2000;
  background-color: rgba(44, 43, 43, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .zzc {
    width: 420px;
    height: 136.42px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    font-size: 18px;
    text-align: left;
    overflow: hidden;
    .item1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        display: inline-block;
        padding: 10px;
      }
    }
    .item2 {
      width: 100%;
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .iconfent {
        padding-left: 20px;
        padding-right: 10px;
      }
    }
    .item3 {
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: flex-start;
    }
  }
}
[class*=' el-icon-'],
[class^='el-icon-'] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-icon-warning {
  color: #ffba00;
}
</style>
